import Vue from 'vue'
import VueRouter from 'vue-router'
import './index.less'

Vue.use(VueRouter)

const MainMenu = {
    template: `
        <div>
            <router-link to="/home">Home</router-link>
            <router-link to="/about">About</router-link>
            <router-link to="/products">Products</router-link>
        </div>
    `
}

const Home = {
    template: '<div class="header">Home</div>'
}

const About = {
    template: '<div class="header">About</div>'
}

const Products = {
    template: '<div class="header">Products</div>'
}

const Err = {
    template: '<div class="header">404</div>'
}

const router = new VueRouter({
    mode: 'history',
    routes: [{
        path: '/',
        component: MainMenu
    }, {
        path: '/home',
        components: {
            default: Home,
            MainMenu: MainMenu
        }
    }, {
        path: '/about',
        components: {
            default: About,
            MainMenu: MainMenu
        }
    }, {
        path: '/products',
        components: {
            default: Products,
            MainMenu: MainMenu
        }
    }, {
        path: '*',
        component: Err
    }]
})

new Vue({
    el: '#app',
    router,
})